<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../jquery-learn/js/jquery-2.1.1.js"></script>

</head>
<body>

<form>
    <input placeholder="Username" required id="username"/>
    <input type="password" placeholder="Password" required id="password"/>
    <input type="submit"/>
</form>

<script type="text/javascript">
    $(function () {
        var msg = "";
        var elements = document.getElementsByTagName("INPUT");

        for (var i = 0; i < elements.length; i++) {
            elements[i].oninvalid = function (e) {
                if (!e.target.validity.valid) {
                    switch (e.target.id) {
                        case 'password' :
                            e.target.setCustomValidity("Bad password");
                            break;
                        case 'username' :
                            e.target.setCustomValidity("Username cannot be blank");
                            break;
                        default :
                            e.target.setCustomValidity("");
                            break;

                    }
                }
            };
            elements[i].oninput = function (e) {
                e.target.setCustomValidity(msg);
            };
        }
    });
</script>
</body>
</html>